<template>
  <div style="width: auto;height: 420px" id="echarts3" ref='dzChart'>
  </div>
</template>

<script>
import {
  totalDataByZt
} from '@/api/dashboard/Analysis'
const colors = ['#5470C6', '#EE6666']
export default {
  name: 'echarts3',
  data () {
    return {
      dzdata:[] ,
      totalNum : 0 ,
    }
  },
  mounted () {
    this.getDzData()
  },
  methods: {
    //获取平台用户数据
    getDzData(){
      totalDataByZt({wslx:1}).then(res=>{
        this.dzdata= res.result
        this.totalNum = this.dzdata.length ;
        this.getStripChart();
      })
    },
    getStripChart(){
      const chart = this.$refs.dzChart
      const myChart = this.$echarts.init(chart)
      let that = this ;
      let option;
      option =  {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(19,17,17,0.5)',
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
          padding: [12, 16, 12, 16],
          textStyle: {
            color: 'rgb(255,255,255)'
          },
          formatter: (param) => {

            let result = `<div style='text-align: left'><div>${param[0].marker}${param[0].name}</div>`
            result += `<div>报税人数：${param[0].value} 人</div>`
            result += `<div>结算金额：${param[1].value} 元</div>`
            result += `<div>代征税额：${param[2].value} 元</div>`
            result += `<div>实缴税额：${param[3].value} 元</div></div>`
            return result
          }
        },
        textStyle: {
          color: '#2C3E50',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [

          {
            type: 'category',
            data: that.dzdata.name,
            // nameTextStyle: {
            //     color: '#2C3E50',
            //     fontSize: 14,
            // },
            axisLabel: {
              color: '#606266',
              rotate: 40,
              show: true,
              fontSize: 10
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#4E5969',
              fontSize: 13
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color:'#DCDFE6'
              }
            },
            axisLine: {
              show: false,
            },
          }
        ],
        color: ['#246EFF', '#00B2FF', '#81E2FF','rgb(105,200,229)'],
        series: [

          {
            name: '报税人数',
            type: 'bar',
            stack: 'user',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius:[0,0, 4, 4]
              }
            },
            data: that.dzdata.bsr
          },
          {
            name: '结算金额',
            type: 'bar',
            stack: 'user',
            barWidth: 20,
            data: that.dzdata.jsje
          },
          {
            name: '代征税额',
            type: 'bar',
            stack: 'user',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius:[4,4, 0, 0]
              }
            },
            data: that.dzdata.ydzse
          },
          {
            name: '实缴税额',
            type: 'bar',
            stack: 'user',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius:[4,4, 0, 0]
              }
            },
            data: that.dzdata.sjse
          }

        ]
      } ;
      option && myChart.setOption(option);
    }

  }
}
</script>

<style scoped>

</style>